<template>
    <el-form
        label-width="90px"
        :model="formLabelAlign"
        ref="ruleForm"
    >
        <el-form-item label="级别">
            <el-input-number v-model="formLabelAlign.level" :min="0" label="轮播图级别"></el-input-number>
        </el-form-item>

        <el-form-item label="轮播图">
            <el-upload
                class="avatar-uploader"
                action="string"
                :http-request="uploadImg"
                :show-file-list="false"
            >
                <img v-if="formLabelAlign.image_url" :src="formLabelAlign.image_url" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submit">立即提交</el-button>
        </el-form-item>

    </el-form>
</template>

<script>
    import {bannerDetail,bannerEdit,bannerAdd} from '@/api/banner'
    import {fileUpload} from '@/api/article'

    export default {
        name: "bannerEdit",
        data() {
            return {
                formLabelAlign:{
                    level:0,
                    image_url:'',
                },
                banner_id:'',
            }
        },
        methods: {
            openMask(banner_id){
                this.banner_id = banner_id
                this.formLabelAlign = {
                    level:0,
                    image_url:'',
                }

                if(this.banner_id) this.getDetail()
            },
            getDetail() {
                bannerDetail(this.banner_id)
                    .then(res=>{
                        if(Number(res.code)===0){
                            let data = res.data
                            Object.assign(this.formLabelAlign,{
                                banner_id:data.banner_id,
                                level:data.level,
                                image_url:data.image_url,
                            })
                        }else{
                            this.$Alert({ message:res.msg, type:'error' })
                        }
                    })
            },
            // 图片上传
            uploadImg(data){
                let file = data.file
                fileUpload(file)
                    .then(res=>{
                        if(Number(res.code)===0){
                            this.formLabelAlign.image_url = res.data.file_url
                        }else{
                            this.$Alert({ message:res.msg,type:'error' })
                        }
                    })
            },
            submit(){
                let formLabelAlign = this.formLabelAlign
                let params = {
                    level:formLabelAlign.level,
                    image_url:formLabelAlign.image_url,
                }

                if(this.banner_id){
                    bannerEdit(this.banner_id,params)
                        .then(res=>this.resultHandle(res))
                }else{
                    bannerAdd(params)
                        .then(res=>this.resultHandle(res))
                }

            },
            resultHandle(res){
                if(Number(res.code)===0){
                    this.$Alert({
                        message:res.msg,
                        type:'success',
                        callback:()=>this.$emit('on-success','')
                    })
                }else{
                    this.$Alert({ message:res.msg, type:'error' })
                }
            },
        },
    }
</script>

<style scoped lang="less">
    .avatar-uploader{
        width: 178px;
        height: 178px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
